<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>密码控件-H5密码控件（弹框）</title>
    <!-- 目前最新版本为v2.0.0 -->
    <script src="https://oss-mpay-static.lianlianpay.com/lib/accp-password/v2.0.0.js"></script>
</head>
<body>
<div>
    <p>密码控件使用说明：</p>
    <p>1、建议先单独调试我们的提供的Demo，调试完毕后再集成到贵司的系统中</p>
    <p>2、调试时，建议使用chrome浏览器，打开浏览器开发者工具，切换成手机模式调试!!! 切换成手机模式调试!!! 切换成手机模式调试!!! 因为加密后的密文会打印再浏览器开发者工具的Console中</p>
    <p>3、这个demo只是主要是演示密码控件的一些方法如何使用，具体的功能，如何去获取用户输入密码后加密生成的密文，然后把这个密文提供给后端API接口使用，前端密码控件的某一些变量值要通过后端接口“申请密码控件Token”获取</p>
    <p>4、用户输入完密码，点击确认后，自动关闭弹框，控制台会打印出密文和random_key，需要把这两个值都一起传递给后端，而且这两个值都是一次性的，一次性的意思就是，当后端接口使用过这两个值，那就不能再使用了，需要重新使用“申请密码控件Token”接口重新获取前端需要的变量值，然后重新生成密文，如果“申请密码控件Token”接口获取到的值一直没有被使用，有效期为10分钟</p>
    <p>打开浏览器开发者工具，切换成手机模式调试!!! 切换成手机模式调试!!! 切换成手机模式调试!!! </p>
    <p></p>
</div><br/><br/><br/>


<button id="password-btn">唤起密码弹窗</button>
<script th:inline="javascript">
    document.getElementById('password-btn').addEventListener('click', () => {
        //从后端获取前端唤起密码控件所需要的参数
        const passwordControlArgs = JSON.parse([[${passwordControlArgs}]]);

        // 以下参数通过服务端获取
        lianlianpay.invokePasswordControl({
            /**
             * passwordScene 使用场景
             * setting_password-设置密码
             * change_password-修改密码
             * bind_card_password-换绑卡
             * cashout_password-提现
             * pay_password-支付
             */
            passwordScene: passwordControlArgs.passwordScene,
            oidPartner: passwordControlArgs.oidPartner, // 商户号
            userId: passwordControlArgs.userId, // 用户号
            passwordElementToken: passwordControlArgs.passwordElementToken, // 向服务端请求生成的 token
            env: 'ste', // 默认 production-生产
            styles: { // 样式集合
                themeColor: '#0E59F0', // 主题颜色（按钮等）
            }
        }, (res) => {
            console.log('密码数据', res)
        })
    })
</script>
</body>
</html>